<template>
    <div class="content-container">
        <div class="role-header">
            <el-button type="success" icon="el-icon-plus" @click="addRole()">添加</el-button>
        </div>
        <el-table :data="roles" border stripe>
            <el-table-column prop="id" label="编号"></el-table-column>
            <el-table-column prop="name" label="角色名称"></el-table-column>
            <el-table-column prop="sn" label="角色编号"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" size="small" icon="el-icon-edit" @click="editRole(scope.row)">编辑
                    </el-button>
                    <el-button type="danger" size="small" icon="el-icon-delete" @click="delRole(scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="content-footer">
            <el-pagination
                    layout="sizes, prev, pager, next, total"
                    :total="total"
                    :page-sizes="[5, 10, 50, 100]"
                    :page-size="pageSize"
                    :current-page="currentPage"
                    @current-change="currentChange"
                    @size-change="sizeChange"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
    import {getRolesApi, delRoleApi} from '@/request/api'

    export default {
        name: "role",
        data() {
            return {
                roles: [],
                currentPage: 1,
                pageSize: 10,
                total: 0,
            }
        },
        methods: {
            addRole() {
                this.$router.push({path: '/role/add'})
            },
            delRole(row) {
                this.$confirm('此操作将删除该角色，是否继续？', '删除提示', {
                    cancelButtonText: '否',
                    confirmButtonText: '是'
                }).then(() => {
                    delRoleApi({
                        id: row.id
                    }).then(res => {
                        console.log(res)
                        if (res.success === true) {
                            this.$message.success('删除成功')
                            this.queryRolesList()
                        }
                    })
                }).catch(() => {
                    //
                })
            },
            editRole(row) {
                this.$router.push({
                    path: `/role/edit/${row.id}`
                })
            },
            queryRolesList() {
                getRolesApi({
                    currentPage: this.currentPage,
                    pageSize: this.pageSize
                }).then(res => {
                    if (res.success === true) {
                        this.roles = res.data.list
                        this.total = res.data.total
                    }
                })
            },
            currentChange(page) {
                this.currentPage = page
                this.queryRolesList()
            },
            sizeChange(size) {
                this.pageSize = size
                this.queryRolesList()
            }
        },
        created() {
            this.queryRolesList()
        }
    }
</script>

<style type="text/less" lang="less" scoped>
    .role-header {
        margin-bottom: 10px;
    }
</style>